<div id="content" class="billing__details">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['对公账户管理', '结算明细']"
      icon="fa fa-smile-o"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>结算明细</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="selectDate top_module">
									<table-select-date
									[startTimePlaceholder]="'选择开始时间'" [endTimePlaceholder]="'选择结束时间'" [specifyId]='specifyId' [specifyTime]='specifyTime' [notInit]="true" (outerTime)="dateSelect($event)" ></table-select-date>
								</div>
                <div class="top_module">
                  <span class="module_text">项目名称</span>
                  <div class="s_hover_box">
                    <select class="select2" id="companySelect">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="del_companySelect()">x</div>
                  </div>
                </div>
                <div class="top_module top_module_box" [ngClass]="{ displayNone: !companyId }">
                  <span class="top_module_label module_text">对接厂区</span>
                  <div class="s_hover_box">
                    <select class="select2" id="factorySelected">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="del_factorySelect()">x</div>
                  </div>
                </div>

                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">费用类型</span>
                  <select class="top_module_select" name="billType" [(ngModel)]="billType" style="width: 100px">
                    <option value="0">全部</option>
                    <option value="1">服务费</option>
                    <option value="2">对接费</option>
                  </select>
                </div>

                <div class="top_module top_module_box" [ngClass]="{ displayNone: !companyId }">
                  <span class="module_text">账户名称</span>
                  <div class="s_hover_box">
                    <select class="select2" id="accountSelect">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="del_accountSelect()">x</div>
                  </div>
                </div>

                <div class="top_module top_module_box" [ngClass]="{ displayNone: !companyId }">
                  <span class="top_module_label module_text">车牌号</span>
                  <div class="s_hover_box">
                    <select class="select2" id="carSelect">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="del_carSelect()">x</div>
                  </div>
                </div>

                <button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
                <button type="button" class="btn btn-primary" (click)="addData(opeartionBillingModal)">添加</button>
              </div>
            </div>
            <div class="tabbable">
              <ul
                class="nav nav-tabs"
                id="myTab"
                style="padding-left: 12px; background-image: linear-gradient(#f1f5fd, #e9f0ff)"
              >
                <li class="s-lis" [ngClass]="{ active: status == '1' }">
                  <a data-toggle="tab" href="#apply" (click)="tabChange('1')">已到账</a>
                </li>
                <li class="s-lis" [ngClass]="{ active: status == '0' }">
                  <a data-toggle="tab" href="#rise" (click)="tabChange('0')">未到账</a>
                </li>
              </ul>
            </div>
            <div class="table_scroll">
              <table class="display dataTables responsive table table-bordered table-hover dataTable s_h5_table">
                <thead>
                  <tr>
                    <th>操作</th>
                    <th>车牌号</th>
                    <th>设备ID</th>
                    <th>项目名称</th>
                    <th>对接厂区</th>
                    <th>账户名称</th>
                    <th>账单类型</th>
                    <th>账单金额[元]</th>
                    <th *ngIf="status !== '0'">到账时间</th>
                    <th *ngIf="status !== '0'">流水单号</th>
                    <th *ngIf="status !== '0'">清单图片</th>
                    <th>创建时间</th>
                    <th>创建人</th>
                    <th>更新时间</th>
                    <th>更新人</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- 递归遍历 可以平级 直接展示与隐藏即可-->
                  <!-- 平级 状态标志 noShow-->
                  <tr
                    *ngFor="let row of tableData"
                    [ngClass]="{
                      'alert-flag': row.alertFlag,
                      active: row.isTop
                    }"
                    [ngStyle]="{
                      'background-color': row.isTop ? '#bddcf3!important' : '',
                      display: row.noShow ? 'none' : ''
                    }"
                  >
                    <td>
                      <button type="button" (click)="delRow(row)">删除</button>
                    </td>
                    <td>
                      {{ row.carNumber }}
                    </td>
                    <td>
                      {{ row.deviceId }}
                    </td>
                    <td>
                      {{ status === '0' ? row.projectName : row.companyName }}
                    </td>
                    <td>
                      {{ status === '0' ? row.companyName : row.factoryName }}
                    </td>
                    <td>
                      {{ status === '0' ? row.username : row.financialMsg ? row.financialMsg.accountName : '' }}
                    </td>
                    <td>
                      {{
                        status === '0'
                          ? row.billType === 1
                            ? '服务费'
                            : '对接费'
                          : row.costType === 1
                          ? '服务费'
                          : '对接费'
                      }}
                    </td>
                    <td>
                      {{ status === '0' ? row.billAmount : row.costPrice }}
                    </td>
                    <td *ngIf="status !== '0'">
                      {{ row.financialMsg ? row.financialMsg.accountingDate : '' }}
                    </td>
                    <td *ngIf="status !== '0'">
                      {{ row.financialMsg ? row.financialMsg.serialnumber : '' }}
                    </td>
                    <td *ngIf="status !== '0'">
                      <button *ngIf="row.carListImg" type="button" (click)="lookPic(row.carListImg, imgModal1)">
                        查看
                      </button>
                    </td>
                    <td>
                      {{ row.createTime }}
                    </td>
                    <td>
                      {{ status !== '0' ? row.createName : row.createUser }}
                    </td>
                    <td>
                      {{ row.updateTime }}
                    </td>
                    <td>
                      {{ row.updateName }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="nowPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!-- 添加结算明细 -->
  <section
    bsModal
    #opeartionBillingModal="bs-modal"
    class="modal fade addRenewal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeRenewalModal(opeartionBillingModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">添加结算明细</h4>
        </div>
        <form
          id="addRenewal"
          class="form-horizontal"
          role="form"
          novalidate="novalidate"
          [saBootstrapValidator]="validatorOptions"
        >
          <div class="modal-body">
            <div class="row form-horizontal">
              <div class="form-group col-xs-12 s_fix_select2">
                <label class="control-label col-xs-2" for="newPassword">
                  项目名称
                  <sup>*</sup>
                </label>
                <div class="col-xs-10 s_fix_select2_width s_fix_select2">
                  <div class="s_hover_box">
                    <select class="select2" id="companySelect2">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="del_companySelect2()">x</div>
                  </div>
                </div>
              </div>

              <div class="form-group col-xs-12 s_fix_select2">
                <label class="control-label col-xs-2" for="newPassword">
                  费用类型
                  <sup>*</sup>
                </label>
                <div class="col-xs-10 s_fix_select2_width s_fix_select2">
                  <select
                    class="form-control"
                    name="costType"
                    [(ngModel)]="opeartionParam.costType"
                    (change)="costTypeChange()"
                    style="width: 100%"
                  >
                    <option value="1">服务费</option>
                    <option value="2">对接费</option>
                  </select>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="control-label col-sm-2 no-padding-right">车辆选择</label>
                <div class="col-sm-4">
                  <div class="clearfix">
                    <button
                      type="button"
                      class="btn btn-primary"
                      style="width: 130px"
                      (click)="showCarTree(carSelectedModal)"
                    >
                      点击选择车辆
                    </button>
                  </div>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="control-label col-sm-2 no-padding-right">
                  已选车辆
                  <sup>*</sup>
                </label>
                <div class="col-sm-9">
                  <div class="clearfix">
                    <div style="height: 150px; border: 1px solid #ccc; overflow-y: auto; padding: 3px">
                      <span class="carSpan" *ngFor="let car of opeartionParam.carArray; let i = index">
                        {{ car.carNumber }}
                        <i class="fa fa-times" aria-hidden="true" (click)="deleteSelectCar(car.id, car.costPrice)"></i>
                      </span>
                    </div>
                    <input class="form-control none" id="deviceIds" name="deviceIds" autocomplete="off" type="text" />
                  </div>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  结算金额
                  <sup>*</sup>
                </label>
                <div class="col-xs-10 insert_text">
                  <input class="form-control" disabled [(ngModel)]="opeartionParam.costPrice" name="costPrice" />
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  清单图片
                  <sup>*</sup>
                </label>
                <div class="col-xs-10 imgFileList">
                  <div class="imgFileList-power">
                    <div class="imgFileList-multifile">
                      <div class="uploadlocation uploadlocation1">
                        <div class="content-list">
                          <div class="headImg" *ngIf="opeartionParam.carListImg">
                            <div class="imgShow">
                              <img class="img" [src]="opeartionParam.carListImg" (click)="bigimg()" />
                            </div>
                            <i class="deleteImg" (click)="deleteImg()"></i>
                          </div>
                          <div class="btn div_imgall" *ngIf="!opeartionParam.carListImg">
                            <div class="div_shuline"></div>
                            <div class="div_hengline"></div>
                            <input
                              type="file"
                              class="up"
                              title=" "
                              placeholder=" "
                              accept="image/*"
                              multiple
                              (change)="multifileChange($event.target.files)"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="control-label col-sm-2 no-padding-right">
                  到账日期
                  <sup>*</sup>
                </label>
                <div class="col-sm-9">
                  <div class="clearfix renewalTime">
                    <!-- 缴费时间的判断input -->
                    <div class="clearfix">
                      <input
                        class="form-control"
                        name="accountingDate"
                        id="startInstallTime"
                        autocomplete="off"
                        [(ngModel)]="opeartionParam.accountingDate"
                        type="text"
                        placeholder="请选择"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group col-xs-12 s_fix_select2" [ngClass]="{ displayNone: !opeartionParam.companyId }">
                <label class="control-label col-xs-2" for="newPassword">
                  流水单号
                  <sup>*</sup>
                </label>
                <div class="col-xs-10 s_fix_select2_width s_fix_select2">
                  <div class="s_hover_box">
                    <select class="select2" id="waterOrderSelect">
                      <option value=""></option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  到账金额
                  <sup>*</sup>
                </label>
                <div class="col-xs-10 insert_text">
                  <input
                    class="form-control"
                    disabled
                    [(ngModel)]="opeartionParam.arrivalAmount"
                    name="arrivalAmount"
                  />
                </div>
              </div>
            </div>
          </div>
        </form>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="closeRenewalModal(opeartionBillingModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="submitModal(opeartionBillingModal)">提交</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 添加结算明细 结束 -->

  <!-- 提交核对 -->
  <div
    bsModal
    #carSelectedModal="bs-modal"
    id="submitCheckModal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    style="overflow: auto"
  >
    <div class="modal-dialog modal-lg" style="width: 1200px">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="cancelSubmitCar(carSelectedModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">选择车辆</h4>
        </div>
        <div class="modal-body" style="padding: 15px">
          <div
            class="page-header clearfix s_table_opreation"
            style="margin-top: 0px; margin-bottom: 15px; padding-bottom: 15px"
          ></div>
          <div class="table_scroll" style="max-height: 300px; overflow-y: auto">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
            >
              <thead>
                <tr>
                  <th>
                    <div class="checkbox" style="margin: 0; left: 5px; text-align: center">
                      <label>
                        <input
                          type="checkbox"
                          class="checkbox style-0"
                          [(ngModel)]="carAllChecked"
                          (click)="carAllSelected()"
                        />
                        <span></span>
                      </label>
                    </div>
                  </th>
                  <th>车牌号</th>
                  <th>设备ID</th>
                  <th>安装厂区</th>
                  <th>对接厂区</th>
                  <th>账单类型</th>
                  <th>账单金额[元]</th>
                  <th>数据来源</th>
                  <th>创建时间</th>
                  <th>创建人</th>
                  <th>更新时间</th>
                </tr>
              </thead>
              <tbody *ngIf="carSelectedTableData.length != 0">
                <tr
                  *ngFor="let row of carSelectedTableData; let i = index"
                  [attr.data-index]="i"
                  [ngClass]="{ selected: row.isChecked }"
                >
                  <td>
                    <div class="checkbox" style="margin: 0; left: 5px; text-align: center">
                      <label>
                        <input
                          type="checkbox"
                          class="checkbox style-0"
                          [(ngModel)]="row.isChecked"
                          (click)="carRowSelected(row, $event, i)"
                        />
                        <span></span>
                      </label>
                    </div>
                  </td>
                  <td>
                    {{ row.detailMsg.carNumber }}
                  </td>
                  <td>{{ row.detailMsg.deviceId }}</td>
                  <td>
                    {{ row.detailMsg.projectName || '' }}
                  </td>
                  <td>{{ row.detailMsg.companyName || '' }}</td>
                  <td>{{ row.detailMsg && row.detailMsg.billType === 1 ? '服务费' : '对接费' }}</td>
                  <td>{{ row.detailMsg.billAmount || '' }}</td>
                  <td>{{ row.detailMsg.dataSource ? dataSource[row.detailMsg.dataSource - 1] : '' }}</td>
                  <td>{{ row.detailMsg.createTime || '' }}</td>
                  <td>{{ row.detailMsg.createUser || '' }}</td>
                  <td>{{ row.detailMsg.updateTime || '' }}</td>
                </tr>
              </tbody>
              <tbody
                *ngIf="carSelectedTableData.length == 0"
                style="height: 50px; margin: 0 auto; text-align: center; line-height: 50px"
              >
                暂无查询数据
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <!-- <button
            type="button"
            class="btn btn-default"
            (click)="cancelSubmitCar(carSelectedModal)"
          >
            取消
          </button> -->
          <button type="button" class="btn btn-primary" (click)="cancelSubmitCar(carSelectedModal)">提交</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 提交核对 end-->

  <!-- 图片查看   弹窗-->
  <section
    bsModal
    #imgModal1="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content" style="width: 570px">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeImgModal1(imgModal1)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="imagesInfo">
            <div class="imgShow" *ngFor="let item of imgLocalList" (click)="bigimg('Modal2', item)">
              <img [src]="item" alt="清单照片" style="cursor: pointer" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 图片查看 弹窗end-->
</div>
<style type="text/css"></style>
